<!-- 店铺头部 -->
<template>
    <div class="shop-header">
        <div class="cp-container shop-top">
            <header v-if="!loading && shopInfo.data.id || loading" v-loading="loading">
                <div class="flone">
                    <nuxt-link :to="`/qiao/s/shop/${shopInfo.data.id}`">
                        <el-image
                            v-if="shopInfo.data.shopLogo"
                            class="logo-img"
                            :src="serFileUrl + shopInfo.data.shopLogo.fileUrl"
                            fit="contain"
                        >
                            <div slot="error" class="image-slot">
                                <img src="~/static/img/sq/mrlogo.jpg" alt="">
                            </div>
                        </el-image>
                    </nuxt-link>
                    <div class="shop-panl-info">
                        <div>
                            <p><span class="black">{{shopInfo.data.shopTitle}}</span><i v-if="shopInfo.data.enterpriseCertification" class="icon icon-qy"></i></p>
                            <p><span>店铺地址:</span> {{fomaterArea(shopInfo.data.addressJson, true) || '--'}}</p>
                            <p><span>综合评分:</span> {{filterNum(shopInfo.data.totalScore)}}</p>
                            <el-row>
                                <el-col :span="8">
                                    <span>总订单量</span>
                                    <p>{{filterNum(shopInfo.data.orderNum)}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <span>中标订单</span>
                                    <p>{{filterNum(shopInfo.data.bidOrderNum)}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <span>服务雇主</span>
                                    <p>{{filterNum(shopInfo.data.buyServcieOrderNum)}}</p>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
                <div class="fltwo">
                    <div class="enname">
                        <nuxt-link tag="span" :to="`/qiao/s/shop/${shopInfo.data.id}`">
                            {{shopInfo.data.shopTitle}}
                        </nuxt-link>
                        <span>{{fomaterArea(shopInfo.data.addressJson)}}</span>
                    </div>
                    <div class="prel">
                        <i v-if="shopInfo.data.enterpriseCertification" class="icon icon-qy"></i>
                        <span class="ping">评</span><span class="num">{{filterNum(shopInfo.data.totalScore||4.6)}}</span>
                        <span class="quality">质量 : </span>
                        <span class="achievement">{{filterNum(shopInfo.data.evalQuality||4.5)}}</span>
                        <span class="quality">速度 : </span>
                        <span class="achievement">{{filterNum(shopInfo.data.evalSpeed||4.5)}}</span>
                        <span class="quality">服务 : </span>
                        <span class="achievement">{{filterNum(shopInfo.data.evalService||4.5)}}</span>
                        <span class="quality">成交额 : </span>
                        <span class="achievement red">{{filterNum(shopInfo.data.totalTransactionAmount)}}</span>
                        <span v-if="shopInfo.data.createUserId !== userinfo.roleUserId" class="span-btn-group">
                            <collection v-if="isCollShow" :collection-source-id="shopInfo.data.createUserId" collection-type="CIIP_SHOP">
                                <span slot-scope="isColl" class="span-btn-item">
                                    <i :class="`icon icon-collection${isColl.data ? '_hover' : ''}`"></i>
                                    {{isColl.data ? '取消收藏' : '收藏店铺'}}
                                </span>
                            </collection>
                            <span class="span-btn-item" @click="open53Server">
                                <i class="icon icon-weixin_hover"></i>
                                <i class="icon icon-weixin"></i>
                                平台客服
                            </span>
                        </span>
                    </div>
                </div>
            </header>
        </div>
        <div class="shop-nav">
            <nav class="cp-container">
                <nuxt-link :to="`${shopPath}/${shopInfo.data.createUserId === userinfo.roleUserId ? 'editor' : shopInfo.id}`">
                    首页
                </nuxt-link>
                <template v-if="shopInfo.id">
                    <nuxt-link v-for="(item, index) in tree" :key="index" :to="`${shopPath}/${shopInfo.id}/list/${item.id}`">
                        {{item.text}}
                    </nuxt-link>
                </template>
            </nav>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Watch,
    Component
} from 'nuxt-property-decorator'
import {
    State
} from 'vuex-class'
import collection from '~/components/common/collection.vue'
import {getShopInfo} from '~/api/shop'
import {open53Server} from '~/method'
import {serFileUrl, ciipWebUrl} from '~/../config/server.url.conf'
@Component({
    name: 'shopHeader',
    components: {
        collection
    }
})
export default class ShopHeader extends Vue {
    loading: boolean = true
    isCollShow: boolean = false
    serFileUrl: string = serFileUrl
    shopPath: string = '/qiao/s/shop'
    isEditor: boolean = false
    @Watch('$route.path', {immediate: true, deep: true})
    routeChange (nv: string) {
        this.isEditor = nv === '/qiao/s/shop/editor'
    }
    @Watch('$store.state.userNum', {immediate: true, deep: true})
    async init (nv: number) {
        if (nv > 0 && this.isEditor) {
            await this.getShopInfo()
        }
    }
    @Watch('$store.state.shopInfo.id', {immediate: true, deep: true})
    async getShopInfo () {
        const userNum = this.$store.state.userNum
        const shopInfo = this.$store.state.shopInfo
        const info = shopInfo.data
        let id = shopInfo.id
        if (Number(id) === Number(info.id)) {
            this.loading = false
            return false
        } else {
            this.isCollShow = false
            this.$nextTick(() => {
                this.isCollShow = true
            })
            this.$store.commit('setShopInfo', {})
        }
        if (this.isEditor) {
            id = this.$store.state.token
        }
        if (id) {
            this.loading = true
            const {data}: any = await getShopInfo(id, this.isEditor)
            if (data.flag && data.data) {
                this.$store.commit('setShopInfo', data.data)
                this.$store.commit('setShopId', data.data.id)
            } else {
                this.$message.error(data.msg)
            }
            this.loading = false
        } else if (this.isEditor && userNum > 0) {
            window.location.href = ciipWebUrl + '/login?redirectUrl=' + window.location.href
        }
    }
    fomaterArea (jsonStr: string, isAr?: boolean) {
        let name = ''
        if (jsonStr) {
            const a = JSON.parse(jsonStr)
            if (isAr) {
                a.forEach((item: any) => {
                    name += item.label
                })
            } else if (a.length > 0) {
                name = a[0].label
            }
        }
        return name
    }
    open53Server () {
        open53Server()
    }
    filterNum (val: any) {
        let str: string = '--'
        if (
            val !== '' &&
            val !== null &&
            !isNaN(Number(val))
        ) {
            str = val
        }
        return str
    }
    @State tree: any
    @State userinfo: any
    @State shopInfo: any
}
</script>

<style lang="scss" scoped>
    .shop-top{
        padding: 24px 0;
        header{
            width: 100%;
            height: 50px;
            display: flex;
            .flone{
                display: block;
                width: 50px;
                height: 50px;
                margin-right: 5px;
                position: relative;
            }
            .fltwo{
                flex: 1;
                .enname{
                    height: 20px;
                    font-size: 14px;
                    margin-bottom: 10px;
                    span:nth-child(2){
                        color: #999;
                    }
                }
                .achievement{
                    font-size: 14px;
                    color: #6cc1ee;
                    &.red{
                        color: #ff5a5a;
                    }
                }
                .quality{
                    color: #999;
                    margin-left: 24px;
                    font-size: 14px;
                }
                .prel{
                    position: relative;
                    .icon-qy{
                        float: left;
                        margin-right: 10px;
                    }
                }
                .ping{
                    width: 16px;
                    height: 16px;
                    display: inline-block;
                    line-height: 16px;
                    font-size: 8px;
                    text-align: center;
                    background-color: #ffefdb;
                    color: #f5c697;
                    border: 1px solid #ffad4d;
                }
                .num{
                    width: 32px;
                    height: 16px;
                    display: inline-block;
                    line-height: 16px;
                    color: #f5c697;
                    text-align: center;
                    font-size: 8px;
                    border: 1px solid #ffad4d;
                    border-left-width: 0;
                }
            }
            .logo-img{
                width: 50px;
                height: 50px;
                background-color: #f5f5f5;
            }
            .span-btn-group{
                float: right;
                line-height: 20px;
                .span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 10px;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: $blue;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
            }
        }
    }
    .shop-nav{
        width: 100%;
        background-color: $blue;
        height: 50px;
        nav{
            line-height: 50px;
            a{
                color: #fff;
                padding: 16px 0;
                line-height: 15px;
                margin-right: 40px;
                position: relative;
                font-size: 14px;
                &:after{
                    content: '';
                    height: 2px;
                    width: 0;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: #fff;
                    transition: all 0.2s;
                }
                &.nuxt-link-exact-active,
                &:hover{
                    &:after{
                        transition: all 0.2s;
                        width: 100%;
                    }
                }
            }
        }
    }
    .shop-panl-info{
        width: 280px;
        position: absolute;
        z-index: 999;
        padding-top: 10px;
        top: 100%;
        display: none;
        &>div{
            width: 100%;
            background-color: #fff;
            padding: 20px 24px;
            line-height: 24px;
            font-size: 14px;
            color: #333;
            border-radius: 4px;
            box-shadow: 0 0 6px #ccc;
        }
        p{
            margin-bottom: 12px;
            i.icon{
                position: relative;
                top: 4px;
                margin-left: 5px;
            }
        }
        span{
            color: #999;
            &.black{
                color: #333;
            }
        }
        .el-row{
            border-top: 1px solid #f3f5f7;
            padding-top: 10px;
        }
        .el-col{
            text-align: center;
            span{
                font-size: 12px;
            }
            p{
                margin-top: 2px;
                font-size: 16px;
                color: $blue;
                margin-bottom: 0;
            }
        }
    }
    .flone:hover{
        .shop-panl-info{
            display: block;
        }
    }
</style>
